<template>
  <div>

      <mh></mh>

    <main class="" id="main-collapse">
      <div>
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas="this.datas"></bread>
      
        

        <Form :label-width="100">

            <FormItem label="课程分类">

                <Select :datas="param" v-model="select">


                </Select>
  
            </FormItem>


          <FormItem label="课程标题">

              <input type="text" v-model="title">

          </FormItem>

          <FormItem label="课程内容">

              <textarea rows="10" v-autosize v-wordcount="100" v-model="desc">

              </textarea>

          </FormItem>


          <FormItem label="上传图片">

              <input type="file" @change="update" />


              <!-- 圆角例子 -->

              <Avatar :src="src" :width='100' fit="fill" >

              </Avatar>

              <img :src="src" />

          </FormItem>

          <FormItem label="价格">

              <input type="text" v-model="price">

          </FormItem>

          <FormItem>
              <Button color="primary"  @click="submit" >提交</Button>
          </FormItem>



        </Form>
        
      
    
      </div>
    
    </main>

    

  

  </div>
</template>


 
<script>

import mh from './mh.vue'
// 导入面包屑导航组件
import bread from './bread.vue'
export default {
  data () {
    return {
      msg: "这是一个变量",
      title:'',
      desc:'',
      param:[],
      select:'java',
      src:'',
      mysrc:'',
      price:0,
      //面包屑变量
      datas:[{'title':'首页',route:{name:'index'}},{title:'上传课程'}],
      
    }
  },
  components: {
    'mh':mh,
    //声明标签
    'bread':bread
  },
  mounted:function(){

    //获取课程分类
    // var _this = this;
    // this.axios.get('http://localhost:8000/catelist/').then(function(result){

    //     console.log(result);
    //     var mylist = [];
    //     //格式化数据
    //     for(let i=0;i<result.data.length;i++){
    //         mylist.push(result.data[i].name);
    //     }
    //     console.log(mylist);
    //     //赋值
    //     _this.param = mylist;
    // });

    //使用箭头函数
    this.axios.get('http://localhost:8000/category/').then((result) => {

      var mylist = [];
        //格式化数据
        for(let i=0;i<result.data.length;i++){
            mylist.push(result.data[i].name);
        }
        console.log(mylist);
        //赋值
        this.param = mylist;

    });

},
  methods:{

    //提交入库
    submit(){
      //请求后台接口
      //定义一个传递变量
      var _this = this;
      this.axios.get('http://localhost:8000/addCourse/',{
          //设置参数
          params:{
              title:this.title,
              desc:this.desc,
              img:this.mysrc,
              category:this.select,
              price:this.price,
              uid:localStorage.getItem("uid")
          }
      }).then(function(result){

          console.log(result);
          _this.$Message(result.data.message);

      });


    },
    //上传图片
    update (e) {
      //声明文件对象
      let file = e.target.files[0];
      //声明参数
      let param = new FormData();
      //添加文件
      param.append('file', file, file.name);
      //声明头部
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      var _this = this;
      // 添加请求头
      this.axios.post('http://localhost:8000/uploadFile/', param, config)
        .then(function(result) {

        console.log(result);

        //将返回的图片地址传递到节点
        _this.src = "http://localhost:8000/static/upload/"+result.data.filename;
        // 保留原始图片
        _this.mysrc = result.data.filename;
									 
      });

    }

     
  }
}


</script>
 
<style>



</style>